<template>
  <div class="table">
    <!-- 顶部按钮 -->
    <el-row>
      <el-input
        style="width: 200px; margin-right: 10px"
        v-model="searchname"
        placeholder="请输入内容"
        clearable
        size="medium"
      ></el-input>
      <el-button type="primary" plain @click="search">搜索</el-button>
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="warning" @click="refresh">刷新</el-button>
    </el-row>
    <!-- 表单数据 -->
    <el-table
      :data="tableData"
      v-loading="tableLoading"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="id"
        label="编号"
        width="80"
      ></el-table-column>
      <el-table-column prop="roleName" label="角色名" width="300">
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
          <el-button @click="update(scope.row)" type="text" size="small"
            >编辑</el-button
          >
          <el-button @click="remove(scope.row)" type="text" size="small"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :page-size="size"
      layout="prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
    <!-- 新增或编辑对话框-->
    <el-drawer title="角色管理" :visible.sync="drawer" :wrapperClosable="false">
      <div>
        <el-form
          v-loading="drawerLoading"
          ref="form"
          :model="roleData"
          label-width="80px"
        >
          <!-- 隐藏域，用于保存id-->
          <el-input type="hidden" v-model="roleData.id"></el-input>

          <el-form-item label="角色名">
            <el-input type="text" v-model="roleData.roleName"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="save">提交</el-button>
            <el-button @click="cancel">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      drawer: false,
      tableLoading: false,
      drawerLoading: false,
      roleData: { id: null, roleName: "" },
      tableData: [],
      searchname: "",
      currentPage: 1,
      size: 2,
      total: 0,
    };
  },
  methods: {
    // 搜索事件（模糊查询）
    async search() {
      this.tableLoading = true;
      let result = await this.$http.get(
        "/role/search/" +
          this.searchname +
          "?current=" +
          this.currentPage +
          "&size=" +
          this.size
      );
      console.log(result);
      this.tableData = result.data.records;
      this.total = result.data.total;
      this.tableLoading = false;
    },
    // 新增按钮事件
    async add() {
      this.roleData.id = null;
      this.roleData.roleName = "";
      this.drawer = true;
      this.drawerLoading = true;
      this.drawerLoading = false;
    },
    // 刷新按钮事件
    async refresh() {
      this.tableLoading = true;
      let result = await this.$http.get(
        "/role/all" + "?current=" + this.currentPage + "&size=" + this.size
      );
      this.tableData = result.data.records;
      this.total = result.data.total;
      this.tableLoading = false;
    },
    // 侧边栏取消按钮事件
    cancel() {
      this.$refs.form.resetFields();
      this.drawer = false;
    },
    // 侧边栏保存按钮事件
    async save() {
      let result = await this.$http.post("/role", this.roleData);
      this.$message.info("保存成功");
      this.drawer = false;
      if (this.searchname == "") {
        this.refresh();
      } else {
        this.search();
      }
    },
    // 表格编辑按钮事件
    async update(row) {
      this.drawer = true;
      this.drawerLoading = true;
      let result = await this.$http.get("/role/" + row.id);
      this.roleData = result.data;
      console.log(this.roleData);
      this.drawerLoading = false;
      if (this.searchname == "") {
        this.refresh();
      } else {
        this.search();
      }
    },
    // 表格删除按钮事件
    remove(row) {
      this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        let result = await this.$http.delete("/role/" + row.id);
        this.$message.success(result.msg);
        if (this.searchname == "") {
          this.refresh();
        } else {
          this.search();
        }
      });
    },
    // 数据大小改变事件
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    // 当前页面改变事件
    handleCurrentChange(val) {
      if (this.searchname == "") {
        this.refresh();
      } else {
        this.search();
      }
    },
  },
  mounted() {
    this.refresh();
  },
};
</script>

<style lang="less" scoped>
.table {
  .el-row {
    margin: 10px;
  }
}
.el-drawer {
  div {
    margin: 10px;
  }
}
.el-pagination {
  text-align: center;
  margin-top: 10px;
}
</style>